<!Doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <title>工具栏</title>
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link th:href="@{/css/layui.css}" rel="stylesheet">
    <link id="bootstrap-style" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        .imgStyle{
            margin: 0 !important;
        }
    </style>
</head>
    <!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/layui.all.js}"></script>
<script th:src="@{/js/mxClient.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>



    <script type="text/javascript">
        mxBasePath = '../static';
        // var arrVertexId = []; //节点
    </script>

    <!-- 引入支持库文件 -->



    <!-- 示例代码 -->
    <script type="text/javascript">
        $(function(){
           var windowHeight=  $(window).height();
             $("#tbContainer").height(windowHeight*0.55);
            $("#tbContainer").height(windowHeight*0.4);
            layui.use('element', function(){
                var element = layui.element;
                element.render();
            });
        })
        window.onload = function () {
            main();
        };
        window.addEventListener("resize",function(){
            var windowHeight=  $(window).height();
            $("#tbContainer").height(windowHeight*0.55);
            $("#tbContainer").height(windowHeight*0.4);
        })
        function mxIconSet(state)
        {
            this.images = [];
            var graph = state.view.graph;



            // Delete
            var img = mxUtils.createImage('img2/delete2.png');
            img.setAttribute('title', 'Delete');
            img.style.position = 'absolute';
            img.style.cursor = 'pointer';
            img.style.width = '20px';
            img.style.height = '20px';
            img.style.left = (state.x + state.width/2-10) + 'px';
            img.style.top = (state.y+ state.height/2-10) + 'px';

            mxEvent.addGestureListeners(img,
                mxUtils.bind(this, function(evt)
                {
                    // Disables dragging the image
                    mxEvent.consume(evt);
                })
            );

            mxEvent.addListener(img, 'click',
                mxUtils.bind(this, function(evt)
                {
                    graph.removeCells([state.cell]);
                    mxEvent.consume(evt);
                    this.destroy();
                })
            );

            state.view.graph.container.appendChild(img);
            this.images.push(img);
        };

        mxIconSet.prototype.destroy = function()
        {
            if (this.images != null)
            {
                for (var i = 0; i < this.images.length; i++)
                {
                    var img = this.images[i];
                    img.parentNode.removeChild(img);
                }
            }

            this.images = null;
        };
        function main()
        {
            //定义新连接的图标
            mxConnectionHandler.prototype.connectImage = new mxImage('img2/connector.gif', 16, 16);
            var deleteImage = new mxImage('img2/forbidden.png', 16, 16);
            // 检测浏览器兼容性
            if (!mxClient.isBrowserSupported())
            {
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else
            {
                // 创建工具栏容器
                // var tbContainer = document.createElement('div');
                // tbContainer.style.position = 'absolute';
                // tbContainer.setAttribute("id","tbContainer");
                // tbContainer.style.overflowY= 'scroll';
                // tbContainer.style.display = 'block';
                // tbContainer.style.padding = '2px';
                // tbContainer.style.left = '0px';
                // tbContainer.style.top = '26px';
                // tbContainer.style.width = '150px';
                // tbContainer.style.height = '550px';
                // // tbContainer.style.boxSizing = 'border-box';
                // tbContainer.style.bottom = '0px';
                // tbContainer.style.paddingLeft = '0px';
                // tbContainer.style.overflowX = 'hidden';
                //
                //
                // // tbContainer.style.borderRight = '2px solid #000';
                // tbContainer.style.backgroundColor = 'white';
                //
                // document.body.appendChild(tbContainer);
              var tbContainer=document.getElementById("tbContainer");
                // 创建工具栏监听工具
                var toolbar = new mxToolbar(tbContainer);
                toolbar.enabled = false;
                // 创建工具栏容器
                // var tbContainer1 = document.createElement('div');
                // tbContainer1.style.position = 'absolute';
                // tbContainer1.setAttribute("id","tbContainer1");
                // tbContainer1.style.overflow = 'scroll';
                // // tbContainer1.style.padding = '2px';
                // tbContainer1.style.left = '0px';
                // tbContainer1.style.top = '600px';
                // tbContainer1.style.width = '150px';
                // tbContainer1.style.bottom = '0px';
                // tbContainer.style.boxSizing = 'border-box';
                // // tbContainer1.style.paddingLeft = '10px';
                // // tbContainer1.style.paddingRight = '5px';
                // document.body.appendChild(tbContainer1);
                var tbContainer1=document.getElementById("tbContainer1");

                // 创建工具栏监听工具
                var toolbar1 = new mxToolbar(tbContainer1);
                toolbar1.enabled = false

                // 在图形中创建容器
                container = document.createElement('div');
                container.style.position = 'absolute';
                // container.style.backgroundColor = '#578ebe';
                container.style.overflowY = 'scroll'
                container.style.overflowX = 'scroll';

                container.style.left = '167px';
                container.style.top = '26px';
                container.style.right = '85px';
                container.style.bottom = '0px';
                // container.style.background = 'url("editors/images/grid.gif")';
                container.style.background = 'url("img2/grid.gif")';
                // container.style.backgroundColor = 'white';


                document.body.appendChild(container);

                // 解决IE浏览器忽略的样式
                if (mxClient.IS_QUIRKS)
                {
                    document.body.style.overflow = 'scroll';
                    new mxDivResizer(tbContainer);
                    new mxDivResizer(container);
                }

                // 在容器中创建图形和模型
                var model = new mxGraphModel();
                var graph = new mxGraph(container, model);
                var button=document.createElement("button");
                var divButton=document.createElement('div');
                button.innerHTML="保存";
                button.setAttribute("type","button");
                button.setAttribute("class","btn btn-primary")
                button.setAttribute("id","saveChart");
                divButton.style.position='absolute';
                // divButton.style.width="50px";
                // divButton.style.width="50px";
                divButton.style.right='100px';
                divButton.style.top='0px';
                divButton.appendChild(button);
                document.body.appendChild(divButton);
                //去锯齿效果
                mxRectangleShape.prototype.crisp = true;
                // 显示导航线
                mxGraphHandler.prototype.guidesEnabled = true;
                // Alt键禁用导航线
                mxGuide.prototype.isEnabledForEvent = function (evt) {
                    return !mxEvent.isAltDown(evt);
                };
                // 显示终点
                mxEdgeHandler.prototype.snapToTerminals = false;
                // 禁用浏览器默认的右键菜单栏
                mxEvent.disableContextMenu(container);

                // 在已有容器内构造一个graph
                // 鼠标框选
                new mxRubberband(graph);
                // 在图形中创建默认组件
                var parent = graph.getDefaultParent();
                // 只可预览不可选中拖动连接
                graph.setEnabled(true);
                graph.isEnabled(true);
                // 容器大小自适应
                graph.setResizeContainer(false);
                // 动态改变样式
                graph.getView().updateStyle = true;
                // 可否重复连接
                graph.setMultigraph(false);
                // 禁止改变元素大小
                graph.setCellsResizable(false);
                // 允许连线的目标和源是同一元素
                graph.setAllowLoops(true);
                // graph.setCellsLocked(false);
                //页面初始化，加载已有的设备和设备之间的关联关系
                // 开始往module里添加cell
                // graph.addListener(mxEvent.CLICK, function(sender, evt) {
                //     var cell = evt.getProperty('cell');
                //     console.log(cell);
                //     var keyHandler = new mxKeyHandler(graph);
                //     keyHandler.bindKey(46, function(evt) {
                //         if (graph.isEnabled())
                //         {
                //             graph.removeCells(cell);
                //         }
                //     });
                //
                // });
                graph.getModel().beginUpdate();
                try
                {
                    //new一个cell 以单元的形式创建一个节点
                    // var cell = new mxCell(null, new mxGeometry(100, 200, 100, 100), "一些样式配置");//节点创建
                    // cell.vertex = true;
                    // //插入这个cell
                    // graph.addCell(cell); //添加节点

                    // var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                    // var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                    // console.log(typeof v1);
                    //插入线条设置连接图形
                    $.ajax({
                        type: "GET",
                        url: "/power/relationship/getGraphDragChart/"+6,
                        dataType: "json",
                        async: false,
                        success: function (data) {
                            console.log("data"+data);
                            console.log(typeof  data);
                            console.log(typeof data.node);
                            if (data.node.length==0) {
                                console.log(1);
                                layer.alert('当前图谱无设备，请添加！', {

                                    icon: 5,

                                    title: "提示"

                                });
                                return false;

                            }
                            else {
                                var node = data.node;
                                var edge = data.edge;
                                var nodeLength = data.node.length;
                                var edgeLength = data.edge.length;
                                console.log("边");
                                console.log(edge);
                                console.log("边");

                                console.log(node);
                                console.log("长度为:" + nodeLength);
                                var vertext = [];
                                var style = {};
                                var styleName = [];
                                for (var j = 0; j < nodeLength; j++) {
                                    vertext[j] = {};
                                    console.log(j);
                                    var style = graph.getStylesheet().getDefaultVertexStyle();
                                    var style1 = mxUtils.clone(style);
                                    // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                                    // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                                    // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                                    // style=mxUtils.clone(style);
                                    // console.log(node[j].picPath);
                                    style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;
                                    style1[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;
                                    style1[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;
                                    style1[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;
                                    style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;

                                    style1[mxConstants.STYLE_STROKECOLOR] = "transparent";
                                    style1[mxConstants.STYLE_FILLCOLOR] = "#578ebe";
                                    style1[mxConstants.STYLE_FONTCOLOR] = "white";
                                    style1[mxConstants.STYLE_FONTSIZE] = "14";


                                    style1[mxConstants.LABEL_HANDLE_SIZE] = 10;
                                    style1[mxConstants.STYLE_IMAGE_WIDTH] = 50;
                                    style1[mxConstants.STYLE_IMAGE_HEIGHT] = 50;
                                    style1[mxConstants.STYLE_IMAGE] = node[j].picPath;
                                    styleName[j] = 'style' + j;
                                    graph.getStylesheet().putCellStyle(styleName[j], style1);
                                    console.log("start");
                                    vertext[j] = graph.insertVertex(parent, node[j].deviceId, node[j].deviceName, node[j].coordinate[0], node[j].coordinate[1], 100, 80, styleName[j]);
                                    console.log(vertext[j]);
                                }
                                //  for(var i=0;i<edgeLength;i++){
                                //     graph.insertEdge(parent,null,'',graph.insertVertex(parent, edge[i].desc.split("#")[0], edge[i].deviceName[0], edge[i].line[0][0], edge[i].line[0][1], 80, 30),
                                //         graph.insertVertex(parent, edge[i].desc.split("#")[1], edge[i].deviceName[1], edge[i].line[1][0], edge[i].line[1][1], 80, 30))
                                // }

                                // var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                                // var styleEdge1 = mxUtils.clone(styleEdge);
                                // styleEdge1[mxConstants.STYLE_FONTCOLOR] = "white";
                                // styleEdge1[mxConstants.STYLE_FONTSIZE] = "14";
                                // styleEdge1[mxConstants.STYLE_STROKECOLOR] = "white";

                                graph.getStylesheet().putCellStyle('styleEdge1', styleEdge1);
                                for (var indexV = 0; indexV < nodeLength; indexV++) {
                                    for (var i = 0; i < nodeLength; i++) {
                                        var desc = node[indexV].deviceId.toString() + "#" + node[i].deviceId.toString();
                                        for (var j = 0; j < edgeLength; j++) {
                                            if (desc == edge[j].desc) {
                                                graph.insertEdge(parent, null, edge[j].typeName, vertext[indexV], vertext[i], 'fontSize=14');

                                            }
                                        }

                                    }
                                }
                            }
                        }
                    })
                    // var e1 = graph.insertEdge(parent, null, '', graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30), graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30));

                    //预览时鼠标悬浮到节点时，改变鼠标样式
                    graph.getCursorForCell = function (cell) {
                        if (cell != null && cell.value != null && cell.vertex == 1) {
                            return 'pointer';
                        }
                    };
                    // $("#saveV").click(function(){
                    //     var encoder = new mxCodec();
                    //     var node = encoder.encode(graph.getModel());
                    //     var xml=mxUtils.getXml(node);
                    //     console.log(xml);
                    //     console.log(typeof xml);
                    //     $.ajax({
                    //         type: "GET",
                    //         url: "/power/device/updateDeviceCoordinates",
                    //         dataType: "json",
                    //         async:false,
                    //         data:{xmlString:xml},
                    //         success: function (data) {
                    //             if(data.message=='success'){
                    //                 layer.alert('保存成功!', {
                    //
                    //                     icon: 6,
                    //
                    //                     title: "提示"
                    //
                    //                 });
                    //             }
                    //         }
                    //     })
                    // })

                }
                finally
                {
                    // 更新事务结束
                    graph.getModel().endUpdate();
                }
                // $.ajax({
                //     type: "GET",
                //     url: "/power/energyType/getAllEnergyType",
                //     dataType: "json",
                //     async: false,
                //     success: function (data) {
                //         var energyList=data;
                //         for(var i=0;i<energyList.length;i++){
                //             var img = mxUtils.createImage('img2/arrowImg2.png');
                //             var imgDiv = document.createElement("div");
                //             imgDiv.style.position = 'relative';
                //             imgDiv.style.left = "20px";
                //             imgDiv.style.width = "40px";
                //             imgDiv.style.height = "40px";
                //             imgDiv.style.marginBottom = "10px";
                //             imgDiv.style.backgroundColor = "#568dbd";
                //             imgDiv.appendChild(img);
                //             var img1 = mxUtils.createImage(energyList[i].iconPath);
                //             img1.style.width = '15px';
                //             img1.style.height = '15px';
                //             var imgDiv1 = document.createElement("div");
                //             imgDiv1.style.position = 'absolute';
                //             imgDiv1.appendChild(img1);
                //             imgDiv1.style.top = "50%";
                //             imgDiv1.style.left = "50%";
                //             imgDiv1.setAttribute('title',energyList[i].typeName);
                //             imgDiv1.style.transform = "translate(-50%,-50%)";
                //             imgDiv.appendChild(imgDiv1);
                //             img.style.width = '40px';
                //             img.style.height = '40px';
                //             img.style.zIndex = "999";
                //             img.setAttribute("title",energyList[i].typeName);
                //             tbContainer1.appendChild(imgDiv);
                //             document.body.appendChild(tbContainer1);
                //             var graphF = function(evt)
                //             {
                //                 var x = mxEvent.getClientX(evt);
                //                 var y = mxEvent.getClientY(evt);
                //                 var elt = document.elementFromPoint(x, y);
                //
                //                 // for (var i = 0; i < graphs.length; i++)
                //                 // {
                //                 if (mxUtils.isAncestorNode(graph.container, elt))
                //                 {
                //                     return graph;
                //                 }
                //                 // }
                //
                //                 return null;
                //             };
                //             var typeName=[];
                //             typeName.push(energyList[i].typeName);
                //             // var funct = function(graph, evt, target, x, y)
                //             // {
                //             //     var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                //             //     cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                //             //     cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //             //     //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                //             //     cell.geometry.relative = true;
                //             //     cell.edge = true;
                //             //     var cells = graph.importCells([cell], x, y, target);
                //             //
                //             //     if (cells != null && cells.length > 0)
                //             //     {
                //             //         graph.scrollCellToVisible(cells[0]);
                //             //         graph.setSelectionCells(cells);
                //             //     }
                //             // };
                //             function funct(graph, evt,target, x, y)
                //             {
                //                 console.log(graph);
                //                 var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                //                 cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                //                 cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //                 //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                //                 cell.geometry.relative = true;
                //                 cell.edge = true;
                //                 var cells = graph.importCells([cell], x, y, target);
                //
                //                 if (cells != null && cells.length > 0)
                //                 {
                //                     graph.scrollCellToVisible(cells[0]);
                //                     graph.setSelectionCells(cells);
                //                 }
                //             };
                //             var dragElt = document.createElement('div');
                //             dragElt.style.border = 'dashed black 1px';
                //             dragElt.style.width = '120px';
                //             dragElt.style.height = '40px';
                //
                //             var ds = mxUtils.makeDraggable(img, graphF,funct, dragElt, null, null, graph.autoscroll, true);
                //
                //             // Redirects feature to global switch. Note that this feature should only be used
                //             // if the the x and y arguments are used in funct to insert the cell.
                //             ds.isGuidesEnabled = function()
                //             {
                //                 return graph.graphHandler.guidesEnabled;
                //             };
                //
                //             // Restores original drag icon while outside of graph
                //             ds.createDragElement = mxDragSource.prototype.createDragElement;
                //         }
                //     }
                // })



                //去锯齿效果
                mxRectangleShape.prototype.crisp = true;
                // 显示导航线
                mxGraphHandler.prototype.guidesEnabled = true;
                // Defines the tolerance before removing the icons
                var iconTolerance = 20;

                // Shows icons if the mouse is over a cell

                graph.addMouseListener(
                    {
                        currentState: null,
                        currentIconSet: null,
                        mouseDown: function(sender, me)
                        {
                            // Hides icons on mouse down
                            if (this.currentState != null)
                            {
                                this.dragLeave(me.getEvent(), this.currentState);
                                this.currentState = null;
                            }
                        },

                        mouseMove: function(sender, me)
                        {
                            if (this.currentState != null && (me.getState() == this.currentState ||
                                me.getState() == null))
                            {
                                var tol = iconTolerance;
                                var tmp = new mxRectangle(me.getGraphX() - tol,
                                    me.getGraphY() - tol, 2 * tol, 2 * tol);

                                if (mxUtils.intersects(tmp, this.currentState))
                                {
                                    return;
                                }
                            }

                            var tmp = graph.view.getState(me.getCell());

                            // Ignores everything but vertices
                            if (graph.isMouseDown || (tmp != null && !graph.getModel().isVertex(tmp.cell)&&!graph.getModel().isEdge(tmp.cell)))
                            {
                                tmp = null;
                            }

                            if (tmp != this.currentState)
                            {
                                if (this.currentState != null)
                                {
                                    this.dragLeave(me.getEvent(), this.currentState);
                                }

                                this.currentState = tmp;

                                if (this.currentState != null)
                                {
                                    this.dragEnter(me.getEvent(), this.currentState);
                                }
                            }
                        },
                        mouseUp: function(sender, me) { },
                        dragEnter: function(evt, state)
                        {
                            if (this.currentIconSet == null)
                            {
                                this.currentIconSet = new mxIconSet(state);
                            }
                        },
                        dragLeave: function(evt, state)
                        {
                            if (this.currentIconSet != null)
                            {
                                this.currentIconSet.destroy();
                                this.currentIconSet = null;
                            }
                        }
                    });

                //在图中，启用新的连接
                graph.setConnectable(false);
                graph.setMultigraph(false);
                var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                var styleEdge1 = mxUtils.clone(styleEdge);
                styleEdge1[mxConstants.STYLE_FONTCOLOR]="white";
                styleEdge1[mxConstants.STYLE_FONTSIZE]="14";
                styleEdge1[mxConstants.STYLE_STROKECOLOR]="white";
                // 按下回车和空格键停止编辑
                var keyHandler = new mxKeyHandler(graph);
                // var rubberband = new mxRubberband(graph);
                var addVertex = function(id,name,icon, w, h, style)
                {
                    var vertex = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                    // vertex.setId(id);
                    // console.log("id="+id);
                    vertex.setVertex(true);
                    console.log(icon);
                    // var img= addToolbarItem(name,graph, toolbar, vertex, icon);
                   var imgDiv=  addToolbarItem(id,name,graph, toolbar, vertex, icon);
                    // mxEvent.addListener(imgDiv, 'mousedown', function(evt)
                    // {
                    //     // do nothing
                    //     var a=1;
                    //     console.log("鼠标在上面");
                    //     console.log(imgDiv);
                    //     if(a==1){
                    //         console.log(1);
                    //         layer.alert('该设备已存在，无法拖入编辑区', {
                    //
                    //             icon: 5,
                    //
                    //             title: "提示"
                    //
                    //         });return false;
                    //     }
                    // });
                    // console.log(img);
                    // img.enabled = true;
                    // img.style.width="40px";
                    // img.setAttribute('title', name);
                    // img.style.backgroundColor="#578ebe";
                };
                var addEdge=function(name,icon,w,h,style){
                    var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;');
                    // var cell = new mxCell(name, new mxGeometry(0, 0, 50, 50), style);
                    cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                    cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                    //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                    cell.geometry.relative = true;
                    cell.edge = true;
                    // var img= addToolbarItem1(name,graph, toolbar1, cell, icon);
                    addToolbarItem1(name,graph, toolbar1, cell, icon);
                    // img.style.width="40px";
                    // img.setAttribute('title', name);
                    // img.style.backgroundColor="#578ebe";

                }
                // addEdge("冷",'img2/arrowImg1.png',50,50,'')
                // addEdge("热",'img2/arrowImg1.png',50,50,'');

                // var graphF = function(evt)
                // {
                //     var x = mxEvent.getClientX(evt);
                //     var y = mxEvent.getClientY(evt);
                //     var elt = document.elementFromPoint(x, y);
                //
                //     // for (var i = 0; i < graphs.length; i++)
                //     // {
                //     if (mxUtils.isAncestorNode(graph.container, elt))
                //     {
                //         return graph;
                //     }
                //     // }
                //
                //     return null;
                // };
                // var funct = function(graph, evt, target, x, y)
                // {
                //     var cell = new mxCell('冷', new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;backgroundImage=url(http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png)');
                //     cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                //     cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                //     //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                //     cell.geometry.relative = true;
                //     cell.edge = true;
                //     var cells = graph.importCells([cell], x, y, target);
                //
                //     if (cells != null && cells.length > 0)
                //     {
                //         graph.scrollCellToVisible(cells[0]);
                //         graph.setSelectionCells(cells);
                //     }
                // };
                // var dragElt = document.createElement('div');
                // dragElt.style.border = 'dashed black 1px';
                // dragElt.style.width = '120px';
                // dragElt.style.height = '40px';
                //
                // var ds = mxUtils.makeDraggable(img, graphF,funct, dragElt, null, null, graph.autoscroll, true);
                //
                // // Redirects feature to global switch. Note that this feature should only be used
                // // if the the x and y arguments are used in funct to insert the cell.
                // ds.isGuidesEnabled = function()
                // {
                //     return graph.graphHandler.guidesEnabled;
                // };
                //
                // // Restores original drag icon while outside of graph
                // ds.createDragElement = mxDragSource.prototype.createDragElement;
                // var addEdge = function(name,icon, w, h, style)
                // {
                //     var edge = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                //     edge.setEdge(true);
                //     var img= addToolbarItemEdge(graph, toolbar1, edge, icon);
                //     console.log(img);
                //     img.enabled = true;
                //     img.style.width="40px";
                //     img.setAttribute('title', name);
                //     img.style.backgroundColor="#578ebe";
                // };
                //插入线条设置连接图形
                $.ajax({
                    type: "GET",
                    url: "/power/device/getGraphDeviceList/" + 6,
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        var node = data.graphDeviceList;
                        var nodeLength = data.graphDeviceList.length;
                        console.log(nodeLength);

                        var styleName=[];
                        for(var i=0;i<nodeLength;i++){
                            var style = graph.getStylesheet().getDefaultVertexStyle();
                            var style1 = mxUtils.clone(style);
                            // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                            // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                            // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                            // style=mxUtils.clone(style);
                            // console.log(node[j].picPath);
                            style1[mxConstants.STYLE_SHAPE]=mxConstants.SHAPE_LABEL;
                            // style1[mxConstants.STYLE_ALIGN]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_VERTICAL_ALIGN]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_IMAGE_ALIGN]=mxConstants.ALIGN_CENTER;
                            style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]=mxConstants.ALIGN_TOP;

                            style1[mxConstants.STYLE_STROKECOLOR]="transparent";
                            style1[mxConstants.STYLE_FILLCOLOR]="#578ebe";
                            style1[mxConstants.STYLE_FONTCOLOR]="white";
                            style1[mxConstants.STYLE_FONTSIZE]="14";


                            style1[mxConstants.LABEL_HANDLE_SIZE]=50;
                            style1[mxConstants.STYLE_LABEL_POSITION]=mxConstants.ALIGN_BOTTOM;
                            style1[mxConstants.STYLE_IMAGE_WIDTH]=50;
                            style1[mxConstants.STYLE_IMAGE_HEIGHT]=50;
                            style1[mxConstants.STYLE_IMAGE]=node[i].picPath;
                            styleName[i]='style'+i;
                            console.log(styleName[i]);
                            graph.getStylesheet().putCellStyle(styleName[i],style1);
                            addVertex(node[i].deviceId,node[i].deviceName,node[i].picPath,100,80,styleName[i]);
                            // toolbar.addLine();
                            // var vertex = new mxCell(node[i].deviceName, new mxGeometry(0, 0, 100, 80), styleName[i]);
                            // vertex.setVertex(true);
                            //
                            // var img= addToolbarItem(graph, toolbar, vertex, node.picPath);
                            // img.enabled = true;
                            // img.style.width="80px";
                            // img.setAttribute('title', node[i].deviceName);
                        }
                    }
                })
                $.ajax({
                    type: "GET",
                    url: "/power/energyType/getAllEnergyType",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        var energyList=data;
                        var styleNameEdge=[];
                        for(var i=0;i<energyList.length;i++){
                            // styleNameEdge[i]='styleEdge'+i;
                            // var styleEdge = graph.getStylesheet().getDefaultEdgeStyle();
                            // var styleEdge1 = mxUtils.clone(styleEdge);
                            // styleEdge1[mxConstants.STYLE_FONTCOLOR]="white";
                            // styleEdge1[mxConstants.STYLE_FONTSIZE]="14";
                            // styleEdge1[mxConstants.STYLE_STROKECOLOR]="white";
                            // styleEdge1[mxConstants.STYLE_IMAGE_BACKGROUND]=energyList[i].iconPath;
                            // styleEdge1[mxConstants.STYLE_IMAGE]=energyList[i].iconPath;
                            // graph.getStylesheet().putCellStyle('edge1',styleEdge1);
                            addEdge(energyList[i].typeName,energyList[i].iconPath,50,50,'');
                        }
                    }
                })
                /*禁用节点双击，防止改变数据 */
                graph.dblClick = function (evt, cell) {
                    var model = graph.getModel();
                    if (model.isVertex(cell)) {
                        return false;
                    }
                };
               //重写方法不允许那条线(edge)可以编辑
                graph.isCellEditable = function(cell)  {
                    return !this.getModel().isEdge(cell)&&!this.getModel().isVertex(cell);
                };
                function addToolbarItem(id,name,graph, toolbar, prototype, image)
                {
                    // 添加、删除功能
                    var funct = function(graph, evt, cell)
                    {
                        graph.stopEditing(false);

                        var pt = graph.getPointForEvent(evt);
                        var vertex = graph.getModel().cloneCell(prototype);
                        vertex.setId(id);
                        // var vertex = graph.getModel().cloneInvalidEdges(prototype);
                        vertex.geometry.x = pt.x;
                        vertex.geometry.y = pt.y;
                        console.log("当前设备的ID为:"+id);
                        graph.addCell(vertex);
                        graph.setSelectionCell(vertex);
                    }
                    // 创建拖动预览图标
                    var img = toolbar.addMode(null, image, funct);
                    var imgDiv=document.createElement("div");
                    var imgDiv2=document.createElement('div');
                    imgDiv2.style.backgroundColor="#568dbd";
                    img.style.width="40px";
                    img.style.height="40px";
                    img.setAttribute('class',"imgStyle");
                    img.setAttribute('id',id);
                    // imgDiv.style.position = 'relative';
                    // imgDiv.style.left = "20px";
                    imgDiv.style.width = "40px";
                    // imgDiv.style.height = "40px";
                    imgDiv.style.marginBottom = "40px";
                    imgDiv.style.textAlign = "center";
                    imgDiv2.style.width="40px";
                    imgDiv2.style.position='relative';
                    imgDiv2.style.left='46px';


                    // imgDiv.style.backgroundColor = "#568dbd";
                    imgDiv2.appendChild(img);
                    var imgDiv1=document.createElement('div');
                    imgDiv1.innerHTML=name;
                    imgDiv1.style.width="133px";
                    imgDiv1.style.wordWrap="break-word";
                    imgDiv1.style.position="absolute";
                    imgDiv1.style.left="50%";
                    imgDiv1.style.transform="translateX(-50%)";

                    // imgDiv1.style.textAlign="center";
                    imgDiv2.appendChild(imgDiv1);
                    imgDiv.appendChild(imgDiv2);
                    mxUtils.makeDraggable(imgDiv, graph, funct);
                    var mytoolBar1=document.getElementById("tbContainer");
                    mytoolBar1.appendChild(imgDiv);

                    mxEvent.addListener(imgDiv, 'mousedown', function(evt)
                    {
                        var mxGraph = graph;
                        var parent = mxGraph.getDefaultParent();
                        var parentChildren = parent.children;
                        var arrEdge = [];   //连接线
                        var arrVertexId = []; //节点

                        var arrVertexName = []; //节点
                         console.log("拖拽时当前的设备id为:"+id);
                        //获取所有信息
                        for (var i = 0; i < parentChildren.length; i++) {
                            var child = parentChildren[i];
                            if (!child.isVisible()) {
                                continue;
                            }
                            //区分连接线、节点
                            if (child.isEdge()) {
                                var obj = new Object();
                                obj.ID = child.id;
                                obj.SourceID = child.source.id;
                                obj.TargetID = child.target.id;
                                arrEdge.push(obj)
                            } else if (child.isVertex()) {
                                // var obj = new Object();
                                // obj.ID = child.id;
                                // obj.Name = child.value;
                                // obj.LeftTopX = child.geometry.x;
                                // obj.LeftTopY = child.geometry.y;
                                arrVertexId.push(child.id);
                                arrVertexName.push(child.value);

                            }
                        }
                        if(arrVertexId.indexOf(id) > -1){
                            $("#delcfmModel1").modal("show");
                        }
                          console.log(arrVertexId);
                         console.log(arrVertexName);

                        // do nothing
                        // var a=1;
                        // console.log("鼠标在上面");
                        // console.log(img);
                        // if(a==1){
                        //     $("#delcfmModel1").modal("show");
                        // }
                    });
                    return imgDiv;
                }


                function addToolbarItem1(name,graph, toolbar, prototype, image)
                {
                    // 添加、删除功能

                    function funct(graph, evt,target, x, y)
                    {
                        var cell = new mxCell(name,new mxGeometry(0, 0, 50, 50), 'curved=0;endArrow=classic;html=1;fontSize=14;');
                        cell.geometry.setTerminalPoint(new mxPoint(0, 50), true);
                        cell.geometry.setTerminalPoint(new mxPoint(50, 0), false);
                        //   cell.geometry.points = [new mxPoint(50, 50), new mxPoint(0, 0)];
                        cell.geometry.relative = true;
                        cell.edge = true;
                        var cells = graph.importCells([cell], x, y, target);

                        if (cells != null && cells.length > 0)
                        {
                            graph.scrollCellToVisible(cells[0]);
                            graph.setSelectionCells(cells);
                        }
                    };
                    // 创建拖动预览图标
                    var img = toolbar.addMode(null, image, funct);
                    var img1 = mxUtils.createImage('img2/arrowImgUse.png');
                    var imgDiv = document.createElement("div");
                    imgDiv.style.position = 'relative';
                    imgDiv.style.left = "46px";
                    imgDiv.style.width = "40px";
                    imgDiv.style.height = "40px";
                    imgDiv.style.marginBottom = "10px";
                    imgDiv.style.marginTop = "10px";

                    imgDiv.style.backgroundColor = "#568dbd";
                    img1.style.width = '40px';
                    img1.style.height = '40px';
                    img1.style.zIndex = "999";
                    img1.setAttribute("title",name);
                    imgDiv.appendChild(img1);
                    // var img1 = mxUtils.createImage(image);
                    img.style.width = '20px';
                    img.style.height = '20px';
                    img.style.margin="0px";
                    var imgDiv1 = document.createElement("div");
                    imgDiv1.style.position = 'absolute';
                    imgDiv1.appendChild(img);
                    imgDiv1.style.top = "50%";
                    imgDiv1.style.left = "50%";
                    imgDiv1.setAttribute('title',name);
                    imgDiv1.style.transform = "translate(-50%,-50%)";
                    imgDiv.appendChild(imgDiv1);
                    mxUtils.makeDraggable(imgDiv, graph, funct);
                    var mytoolBar=document.getElementById("tbContainer1");
                    mytoolBar.appendChild(imgDiv);
                    // return img;
                }
                // var addVertex = function(name,icon, w, h, style)
                // {
                //     var vertex = new mxCell(name, new mxGeometry(0, 0, w, h), style);
                //     vertex.setVertex(true);
                //
                //    var img= addToolbarItem(graph, toolbar, vertex, icon);
                //    console.log(img);
                //     // img.enabled = true;
                //     // img.style.width="80px";
                //     // img.setAttribute('title', name);
                // };
                // var style = graph.getStylesheet().getDefaultVertexStyle();
                // var style1 = mxUtils.clone(style);
                // // style1[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
                // // style1[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
                // // style1[mxConstants.STYLE_GRADIENTCOLOR] = 'white';
                // // style=mxUtils.clone(style);
                // // console.log(node[j].picPath);
                // style1[mxConstants.STYLE_SHAPE]=mxConstants.SHAPE_LABEL;
                // // style1[mxConstants.STYLE_ALIGN]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_VERTICAL_ALIGN]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_IMAGE_ALIGN]=mxConstants.ALIGN_CENTER;
                // style1[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]=mxConstants.ALIGN_TOP;
                //
                // style1[mxConstants.STYLE_STROKECOLOR]="transparent";
                // style1[mxConstants.STYLE_FILLCOLOR]="transparent";
                // style1[mxConstants.STYLE_FONTCOLOR]="black";
                // style1[mxConstants.STYLE_FONTSIZE]="14";
                // //
                // //
                // style1[mxConstants.LABEL_HANDLE_SIZE]=50;
                // style1[mxConstants.STYLE_LABEL_POSITION]=mxConstants.ALIGN_BOTTOM;
                // style1[mxConstants.STYLE_IMAGE_WIDTH]=50;
                // style1[mxConstants.STYLE_IMAGE_HEIGHT]=50;
                // style1[mxConstants.STYLE_IMAGE]='http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png';
                // graph.getStylesheet().putCellStyle('style1',style1);
                // addVertex('123','http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png', 100, 80, 'style1');
                // addVertex('editors/images/rounded.gif', 100, 40, '');
                // addVertex('editors/images/ellipse.gif', 40, 40, '');
                // addVertex('editors/images/rhombus.gif', 40, 40, '');
                // addVertex('editors/images/triangle.gif', 40, 40, '');
                // addVertex('editors/images/cylinder.gif', 40, 40, '');
                // addEdge('123','http://49.234.228.157:10086/bb98c20b-9227-45b0-acaa-ac6fa4992dc2.png', 30, 40, '');
                // toolbar.addLine();
                // graph.container.setAttribute('tabindex', '-1');
                // graph.container.focus();



                // var button = mxUtils.button('Create toolbar entry from selection', function(evt)
                // {
                //     if (!graph.isSelectionEmpty())
                //     {
                //         // 创建一个副本，并保存它的状态
                //         var cells = graph.getSelectionCells();
                //         var bounds = graph.getView().getBounds(cells);
                //
                //         // 添加、删除功能
                //         var funct = function(graph, evt, cell)
                //         {
                //             graph.stopEditing(false);
                //
                //             var pt = graph.getPointForEvent(evt);
                //             var dx = pt.x - bounds.x;
                //             var dy = pt.y - bounds.y;
                //
                //             var clones = graph.importCells(cells, dx, dy);
                //             graph.setSelectionCells(clones);
                //         }
                //
                //         // 创建拖动预览图标
                //         var img = toolbar.addMode(null, 'editors/images/outline.gif', funct);
                //         mxUtils.makeDraggable(img, graph, funct);
                //     }
                // });

                // var deviceDiv0=document.createElement("div");
                // deviceDiv0.setAttribute("class","layui-collapse");
                // var deviceDiv=document.createElement("div");
                // deviceDiv.setAttribute("class","layui-colla-item");
                // var deviceDiv1=document.createElement("div");
                // deviceDiv1.setAttribute("class","layui-colla-title");
                // deviceDiv1.innerHTML="设备列表"
                // var deviceDiv2=document.createElement("div");
                // deviceDiv2.setAttribute("class","layui-colla-content layui-show");
                // deviceDiv2.setAttribute("id","deviceList");
                // deviceDiv2.innerHTML="123123123123123";
                // var tbContainer=document.getElementById("tbContainer");
                // deviceDiv.appendChild(deviceDiv1);
                // deviceDiv.appendChild(deviceDiv2);
                // deviceDiv0.appendChild(deviceDiv);
                //
                // tbContainer.appendChild(deviceDiv0);

                // var deviceDiv=document.createElement("div");
                // deviceDiv.innerHTML="设备列表";
                // deviceDiv.style.fontSize="14px";
                // deviceDiv.style.position="absolute";
                // deviceDiv.style.top="0px";
                // var deviceDiv1=document.createElement("div");
                // deviceDiv1.innerHTML="属性列表";
                // deviceDiv1.style.fontSize="14px";
                // deviceDiv1.style.position="absolute";
                // deviceDiv1.style.top="580px"
                // deviceDiv1.style.left="0px";
                // var img=document.createElement("img");
                // img.setAttribute("src","img2/expanded.gif");
                // img.setAttribute("onclick","up(this)");
                // img.style.width="20px";
                // img.style.height="20px";
                // img.style.position="absolute";
                // img.style.top="0px";
                // img.style.left="65px";
                // var img1=document.createElement("img");
                // img1.setAttribute("src","img2/expanded.gif");
                // img1.setAttribute("onclick","up1(this)");
                // img1.style.width="20px";
                // img1.style.height="20px";
                // img1.style.position="absolute";
                // img1.style.top="580px";
                // img1.style.left="65px";
                // document.body.appendChild(deviceDiv);
                // document.body.appendChild(img);
                // document.body.appendChild(img1);
                // document.body.appendChild(deviceDiv1);
                // button.style.position = 'absolute';
                // button.style.left = '2px';
                // button.style.top = '2px';
                // document.body.appendChild(button);
                $("#saveChart").click(function(){
                    var encoder = new mxCodec();
                    var node = encoder.encode(graph.getModel());
                    var xml=mxUtils.getXml(node);
                    console.log(xml);
                    console.log(typeof xml);
                    $.ajax({
                        type: "POST",
                        url: "/power/graphInfo/updateGraph",
                        dataType: "json",
                        async:false,
                        data:{graphId:6,xmlString:xml},
                        success: function (data) {
                            if(data.message=='success'){
                                $("#delcfmModel2").modal("show");
                            }
                            if(data.message=='edgeError'){
                                $("#delcfmModel3").modal("show");
                            }
                        }
                    })
                })
            //     var keyHandler = new mxDefaultKeyHandler(graph);
            //      keyHandler.bindAction(46, function (evt) {
            //     console.log(1);
            //     if (graph.isEnabled()) {
            //         graph.removeCells();
            //     }
            // });
            }
        }


        // function addToolbarItemEdge(graph, toolbar1, prototype, image)
        // {
        //     // 添加、删除功能
        //     var funct = function(graph, evt, cell)
        //     {
        //         graph.stopEditing(false);
        //
        //         var pt = graph.getPointForEvent(evt);
        //         var edge = graph.getModel().cloneCell(prototype);
        //         edge.geometry.x = pt.x;
        //         edge.geometry.y = pt.y;
        //
        //         graph.addCell(edge);
        //         graph.setSelectionCell(edge);
        //     }
        //     // 创建拖动预览图标
        //     var img = toolbar.addMode(null, image, funct);
        //     mxUtils.makeDraggable(img, graph, funct);
        //     return img;
        // }

    </script>
</head>

<!-- 页面载入后启动程序. -->
<body>
<!--提示模态框-->
<div class="modal fade" id="delcfmModel1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">该设备已在编辑区中，无法拖入!</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary" onclick="deleteDeviceById()">确定</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--提示模态框结束-->
<!--提示模态框-->
<div class="modal fade" id="delcfmModel2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel2">提示</h4>
            </div>
            <div class="modal-body">保存成功!</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary" onclick="deleteDeviceById()">确定</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--提示模态框结束-->
<!--提示模态框-->
<div class="modal fade" id="delcfmModel3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel3">提示</h4>
            </div>
            <div class="modal-body">保存失败!请确认边是否连接在设备上。</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button type="button" class="btn btn-primary" onclick="deleteDeviceById()">确定</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--提示模态框结束-->
<div style="width: 167px;position:absolute;top: 26px;left: 0;z-index: 999">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <div class="layui-colla-title">设备列表</div>
            <div class="layui-colla-content layui-show" id="tbContainer" style="overflow-y: scroll;overflow-x: hidden">
            </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">属性列表</div>
            <div class="layui-colla-content layui-show" id="tbContainer1" style="overflow-y: scroll;overflow-x: hidden">
            </div>
        </div>
    </div>
</div>
</body>
</html>